<script setup>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter,useRoute } from "vue-router";
import breadcrumb from "!/breadcrumb/breadcrumb.vue";
import { headNavSend } from "@/api/home";
import scrollTop from "@/components/ScrollTop/scroll-top.vue";
const router = useRouter();
const route = useRoute();
const store = useStore();
const loading = ref(true);
const hove = ref(0);
const is = ref(false);
const navData = ref([]);
const navChildData = ref([]);
const body = ref("");
const value = ref("");

const user = localStorage.getItem("user");
store.commit("SET_INFO", JSON.parse(user));

const initData = async () => {
  const data = await headNavSend();
  navData.value = data.result;

  loading.value = false;
};

onMounted(() => {
  initData();
});

const hoveContent = (i) => {
  if (!isNaN(i)) {
    hove.value = i;
    navChildData.value = navData.value[i].children;
  }

  is.value = true;
};

const hoveContentOut = (e) => {
  // e.currentTarget.style.transitionDelay = '0.5s'
  is.value = false;
};

const exitLogin = () => {
  localStorage.removeItem("token");
  localStorage.removeItem("user");
  store.commit("SET_INFO", "");
  ElMessage({
    message: "退出登录",
    type: "success",
  });
};

const keyDown = (e) => {
  if (e.keyCode === 13) {
    router.push(`/search/${value.value}`);
  }
};

const toCategory = (id) => {
  router.push("/category/" + id);
};
const toFilter = (id) => {
  router.push(`/filter/${id}`);
};
</script>

<template>
  <div class="head-nav">
    <span v-if="store.state.user.info">
      <span>{{ store.state.user.info.nickname }}</span>
    </span>
    <span v-else>
      <router-link to="/registeredAndLogin/login">请先登录</router-link>
    </span>
    <span v-if="!store.state.user.info">
      <router-link to="/registeredAndLogin/registered">免费注册</router-link>
    </span>
    <span v-else @click="exitLogin"> 退出登录 </span>
    <span>我的订单</span>
    <span>
      <router-link to="/vip">会员中心</router-link>
    </span>
    <span>帮助中心</span>
    <span>在线客服</span>
    <span>手机版</span>
  </div>
  <header class="header">
    <div class="header-box">
      <div class="logo">
        <div style="width: 50px; height: 50px; border: 1px solid red"></div>
        <div>
          <h2>小兔鲜儿</h2>
          <p>新鲜 亲民 快捷</p>
        </div>
      </div>

      <div class="header-nav">
        <el-skeleton animated :loading="loading">
          <template #template>
            <div class="nav-box">
              <el-skeleton-item v-for="i in 9" :key="i"></el-skeleton-item>
            </div>
          </template>
          <template #default>
            <div class="nav-box">
              <div style="color: #1abc9c">
                <router-link to="/" style="display: block">首页</router-link>
              </div>
              <div
                :class="hove == index && is ? 'nav-item' : ''"
                v-for="(item, index) in navData"
                :key="item.id"
                @mouseover="hoveContent(index)"
                @mouseout="hoveContentOut"
                @click="toCategory(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>
      <div class="search">
        <el-input
          v-model="value"
          placeholder="输入商品关键词"
          @keydown="keyDown"
        >
          <template #suffix>
            <!-- <el-icon class="el-input__icon"><calendar /></el-icon> -->
          </template>
        </el-input>
      </div>

      <div class="shopping-cart">
        <div class="cart-icon">我的购物车</div>
        <div class="cart-list" v-if="route.path != '/shopping-cart'">
          <div class="cart-list-child">
            <div class="cart-item" v-for="item in 7" :key="item">
              <div class="good-img"></div>
              <div class="good-text">
                <p style="font-size: 14px">男式经典美利奴V领羊毛衫</p>
                <p style="color: #aaa">黑色L (175/92A) *1</p>
              </div>
              <div class="good-price">
                <span>¥99</span>
              </div>
            </div>
            <div class="to-shopping-cart">
              <div>
                <div>共8件商品</div>
                <div style="color: #f04844; font-size: 20px">234323元</div>
              </div>
              <div
                style="
                  background-color: #f04844;
                  color: #fff;
                  padding: 15px 20px;
                "
              >
                <router-link to="/shopping-cart">去购物车结算</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="nav-child"
      :style="{
        maxHeight: is ? '70px' : '0',
        padding: is ? '20px 0' : '0',
        transitionDelay: is ? '' : '0.2s',
      }"
      @mouseover="hoveContent()"
      @mouseout="hoveContentOut"
    >
      <div
        v-for="item in navChildData"
        :key="item.id"
        @click="toFilter(item.id)"
      >
        <div><img :src="item.picture" alt="" /></div>
        <div>{{ item.name }}</div>
      </div>
    </div>
  </header>

  <breadcrumb />

  <router-view></router-view>
  <footer>
    <div class="footer-content-center"></div>
  </footer>

  <scroll-top></scroll-top>
</template>

<style lang="scss">
.head-nav {
  height: 50px;
  background-color: #333;
  padding: 0 10%;
  line-height: 50px;

  color: #cccccc;
  text-align: right;
  span {
    padding: 0 10px;
    cursor: pointer;

    & ~ span {
      border-left: 1px solid #eee;
    }
  }

  a {
    color: #cccccc;
  }
}
.header {
  // position: relative;
  background-color: #fff;
  // width: 100%;
  height: 100px;
  // border: 1px solid green;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #ddd;

  .nav-child {
    position: absolute;
    top: calc(100%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 80%;
    text-align: center;
    background-color: #fff;
    padding: 20px 0;

    height: 70px;
    transition: all 0.3s;
    transition-timing-function: linear;
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    img {
      width: 50px;
      height: 50px;
    }

    & div:hover {
      color: #1abc9c;
      cursor: pointer;
    }
  }

  .header-box {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;

    .logo {
      flex-grow: 0;
      display: flex;
    }

    .header-nav {
      flex-grow: 1;

      .nav-box {
        display: flex;
        padding: 0 20px;
        justify-content: space-around;
        a {
          color: inherit;
        }
        div {
          // flex-grow: 1;
          width: 9%;
          height: 35px;
          line-height: 35px;
          text-align: center;
          font-size: 15px;
          font-weight: 700;
          cursor: pointer;
          border-bottom: 2px solid transparent;
        }
        .nav-item {
          border-bottom: 2px solid #1abc9c;
          color: #1abc9c;
        }
      }
    }

    .search {
      flex-grow: 0;

      .el-input__wrapper {
        border-radius: 25px;
        font-size: 13px;
      }
    }

    .shopping-cart {
      cursor: pointer;
      position: relative;
      flex-grow: 0;
      margin-left: 10px;

      &:hover .cart-list .cart-list-child {
        max-height: 650px;
        // overflow-y: auto;
        overflow: visible;
        overflow-y: auto;
        opacity: 1;
        
          padding: 20px 20px 0 20px;
      }

      &:hover .cart-list::before {
        opacity: 1;
        transition: all 0.5s;
      }

      .cart-icon {
      }

      .cart-list {
        .cart-list-child {
          padding: 0 20px;
          position: absolute;
          overflow: hidden;
          right: 0;
          top: 35px;
          width: 400px;
          max-height: 0;
          background-color: #fff;
          // border: 1px solid gray;
          box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19),
            0 6px 20px 0 rgba(0, 0, 0, 0.19);
          transition: all 0.5s;

          &::-webkit-scrollbar {
            width: 0px;
            height: 5px;
          }

          &::-webkit-scrollbar-thumb {
            background: rgb(228, 227, 227);
            border-radius: 5px;
          }

          & {
            scrollbar-width: 10px;
            scrollbar-base-color: green;
            scrollbar-track-color: red;
            scrollbar-arrow-color: blue;
          }

          .cart-item {
            // margin: 20px 0;
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            & ~ .cart-item {
              margin-top: 20px;
            }

            .good-img {
              width: 80px;
              height: 80px;

              border: 1px solid forestgreen;
            }
            // .good-text {
            // }
            // .good-price {
            // }
          }

          .to-shopping-cart {
            box-sizing: border-box;
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            position:sticky;
            bottom: 0;
            left: 0;
            background-color: #fff;
            padding: 20px;
          }
        }

        &::before {
          transition: all 0.5s 0.5s;
          position: absolute;
          content: "";
          opacity: 0;
          width: 0;
          height: 0;
          right: 25px;
          top: 15px;
          z-index: 1;
          border-top: 10px solid transparent;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #fff;
          filter: drop-shadow(0px -10px 8px rgba(0, 0, 0, 0.2));
        }
      }
    }
  }
}

footer {
  width: 100%;
  background-color: #333;
  height: 250px;

  .footer-content-center {
    width: $width;
    margin: 0 auto;
    border: 1px solid red;
  }
}
</style>
